<script lang="ts" setup>
withDefaults(defineProps<{
  action: () => void
  icon: string
  title: string
  color?: string
  grid?: number
}>(), {
  color: 'transparent',
})
</script>

<template>
  <div
    flex flex-col items-center
    :style="grid ? {
      width: `${100 / grid}%`,
      marginBottom: '0.75rem',
    } : undefined"
    @click="action"
  >
    <div
      h-10 w-10 flex-cc p0
      :style="{ backgroundColor: color }"
    >
      <img h-8 w-8 :src="`/icons/${icon}.png`">
    </div>

    <div text-center text-size-3.5 text-sky-9>
      {{ title }}
    </div>
  </div>
</template>

<style scoped>

</style>
